<template>
	<view class="page">
		<!-- 搜索框 -->
		<!-- <view class="header1">
			<view class="ipt-box">
				<input v-model="searchIpt" type="text" value="" placeholder="请输入您要搜索的内容"
					placeholder-class="plac-class" />
				<image src="/static/search1.png" mode="" @tap="searNum"></image>
			</view>
			<view class="header1-right" @tap="clousText">
				<view>场站设备</view>
				<image src="/static/xiala.png" mode=""></image>
			</view>
		</view> -->
		<!-- 列表 -->
		<view class="ipts">
			<!-- 设备编号 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备编号</view>
					</view>
					<view class="info-item-right">01</view>
				</view>

			</view>
			<!-- 投用日期 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>投用日期</view>
					</view>
					<view class="info-item-right">6875</view>
				</view>

			</view>
			<!-- 负责人 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>负责人</view>
					</view>
					<view class="info-item-right">菲斯顿</view>
				</view>

			</view>
		</view>
		<!-- 第二块 -->
		<view class="ipts">
			<!-- 设备种类 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备种类</view>
					</view>
					<view class="select" @tap="showSpecies = true">
						<input disabled class="ipt" type="text" v-model="selectType.label" placeholder="请选择" />
						<u-icon name="arrow-right"></u-icon>
						<u-select v-model="showSpecies" :list="user" @confirm="confirm($event,'selectType')"></u-select>
					</view>
				</view>
			</view>
			<!-- 设备品牌 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备品牌</view>
					</view>
					<view class="select" @tap="showBrand = true">
						<input disabled class="ipt" type="text" v-model="selectBrand.label" placeholder="请选择" />
						<u-icon name="arrow-right"></u-icon>
						<u-select v-model="showBrand" :list="user1" @confirm="confirm($event,'selectBrand')"></u-select>
					</view>
				</view>

			</view>
			<!-- 设备型号 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备型号</view>
					</view>
					<view class="info-item-right">型号</view>
				</view>

			</view>
			<!-- 设备编码 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备编码</view>
					</view>
					<view class="info-item-right">43654734</view>
				</view>

			</view>
			<!-- 设备地址 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>设备地址</view>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="info-item-right">武强县东孙庄任庄村</view>
						<image src="/static/pagesB/weizhi.png" mode=""></image>
					</view>
				</view>

			</view>
			<!-- 相关参数 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>相关参数</view>
					</view>
					<view class="info-item-right">参数</view>
				</view>

			</view>
			<!-- 本次检定日期 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>本次检定日期</view>
					</view>
					<view class="info-item-right">2020.07.30</view>
				</view>

			</view>
			<!-- 下次检定日期 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>下次检定日期</view>
					</view>
					<view class="info-item-right">2021.07.30</view>
				</view>

			</view>
		</view>
		<!-- 第三块 -->
		<view class="ipts">
			<!-- 检查项目 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>检查项目</view>
					</view>
					<view class="select" @tap="showProject = true">
						<input disabled class="ipt" type="text" v-model="selectProject.label" placeholder="请选择" />
						<u-icon name="arrow-right"></u-icon>
						<u-select v-model="showProject" :list="user2" @confirm="confirm($event,'selectProject')"></u-select>
					</view>
				</view>

			</view>
			<!-- 检查结果 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>检查结果</view>
					</view>
					<input class="item-ipt" type="text" value="" placeholder="请填写检查结果" />
					<!-- <view class="info-item-right">请填写检查结果</view> -->
				</view>

			</view>
			<!-- 上传检查结果照片 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>上传检查结果照片</view>
					</view>
					<view class="pic-right">
						<view class="addform-items">
							<view class="" style="position: relative;" v-for="(i,index) in img1">
								<image class="form-img" :src="i" :key="index" @tap="seeimg(index)"></image>
								<image class="delet" src="/static/delet.png" mode="" @tap="deletImg(index)"></image>
							</view>
							<view class="add" @tap="choosefrom">
								<u-icon name="camera" color="#999999" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 上传设备检查记录资料 -->
			<view class="list">
				<view class="info-item">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>上传设备检查记录资料</view>
					</view>
					<view class="pic-right">
						<view class="addform-items">
							<view class="" style="position: relative;" v-for="(i,index) in img2">
								<image class="form-img" :src="i" :key="index" @tap="seeimg2(index)"></image>
								<image class="delet" src="/static/delet.png" mode="" @tap="deletImg2(index)"></image>
							</view>
							<view class="add" @tap="choosefrom2">
								<u-icon name="plus" color="#999999" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 备注 -->
			<view class="list">
				<view class="info-item" style="border-bottom: 0;">
					<view class="info-item-left">
						<view class="dot"></view>
						<view>备注</view>
					</view>
					<view class=""></view>
				</view>
				<view class="explain">
					<textarea v-model="autoText" maxlength="200" auto-height @input="textChange" class="textArea"
						value="" placeholder="添加备注" style="font-size: 24rpx;" />
				</view>
				<!-- <view class="suppBottom">
					<view class="danger-img-box">
					</view>
					<view class="num">
						<view class="">{{textNumber}}/200</view>
					</view>
				</view> -->
			</view>
			<!--  -->
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<view class="btn1 consel" @click="flag= true,searchIpt = ''">取消</view>
			<view class="btn1 save" @click="userPost">保存</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchIpt: '',
				showSpecies: false,
				user: [{
						value: 1,
						label: '种类1'
					},
					{
						value: 2,
						label: '种类2'
					},
					{
						value: 3,
						label: '种类3'
					}
				],
				selectType:{
					value: 0,
					label: ''
				},
				showBrand: false,
				user1: [{
						value: 1,
						label: '品牌1'
					},
					{
						value: 2,
						label: '品牌2'
					},
					{
						value: 3,
						label: '品牌3'
					}
				],
				selectBrand:{
					value: 0,
					label: ''
				},
				showProject: false,
				user2: [{
						value: 1,
						label: '项目1'
					},
					{
						value: 2,
						label: '项目2'
					},
					{
						value: 3,
						label: '项目3'
					}
				],
				selectProject:{
					value: 0,
					label: ''
				},
				// 备注
				autoText: '',
				textNumber: 0,
				img1: [], //处理图片路径
				img2: [], //处理图片路径
			}
		},
		methods: {
			userPost(){
				
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			confirm(e,obj) {
				this[obj] = e[0]
			},
			clousText() {
				if (this.searchIpt) {
					this.searchIpt = ''
					console.log('取消');
				}
			},
			searNum() {
				if (!this.searchIpt) {
					uni.showToast({
						title: '请输入要搜索的内容',
						icon: 'none'
					})
					return
				}
				this.$emit('SearchEvents', this.searchIpt)
			},
			// 备注
			textChange(e) {
				if (e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			// 选择图片
			choosefrom() {
				if (this.img1.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'],
						success: (res) => {
							_this.img1.push(res.tempFilePaths[0])

						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 选择图片2
			choosefrom2() {
				if (this.img2.length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'],
						success: (res) => {
							_this.img2.push(res.tempFilePaths[0])

						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '上传已达到限制'
					})
				}

			},
			// 删除图片
			deletImg(index) {
				this.img1.splice(index, 1)
			},
			// 删除图片2
			deletImg2(index) {
				this.img2.splice(index, 1)
			},
			// 图片预览
			seeimg(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img1);
				uni.previewImage({
					urls: this.img1,
					current: index,
					loop: true
				})
			},
			// 图片预览2
			seeimg2(index) {
				console.log(index);
				// uni.previewImage({
				// 	urls: this.img1
				// });
				console.log(this.img2);
				uni.previewImage({
					urls: this.img2,
					current: index,
					loop: true
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.addform-items {
		display: flex;
		align-items: center;

		.form-img {
			width: 60rpx !important;
			height: 60rpx !important;
			margin-right: 20rpx;
		}

		.delet {
			position: absolute;
			top: -8rpx;
			right: 4rpx;
			width: 28rpx;
			height: 28rpx;
			z-index: 10;
		}

		.add {
			width: 60rpx;
			height: 60rpx;
			border: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.page {
		background: #F1F1F1;
		padding-bottom: 100rpx;

		.header1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 40rpx;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 480rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		// 列表
		.ipts {
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.list {

				// 添加备注
				.explain {
					.textArea {
						min-height: 80rpx;
						padding: 14rpx 30rpx;
						font-size: 32rpx;
						text-align: left;
						color: rgba(187, 187, 187, 0.84);
					}
				}

				.suppBottom {
					.danger-img {
						position: relative;
						margin-left: 50rpx;
						margin-bottom: 0rpx;
						width: 68rpx;
						height: 68rpx;
						float: left;

						image {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}

					.num {
						float: right;
						margin-right: 26rpx;
					}
				}

				// 列表部分
				.info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0rpx 32rpx;
					height: 100rpx;
					align-items: center;
					border-bottom: 1rpx solid #DDDDDD;

					.info-item-left {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.dot {
							width: 8rpx;
							height: 8rpx;
							background-color: #003690;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}

					.select {
						display: flex;
						align-items: center;

						.ipt {
							text-align: right;
						}
					}

					.item-ipt {
						width: 400rpx;
						text-align: end;
						font-size: 28rpx;
					}

					.info-item-right {
						font-size: 28rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #555555;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.pic-right {
						// width: 60rpx;
						// height: 60rpx;
						// border: 1rpx solid #999999;
						// opacity: 0.8;
						// border-radius: 4rpx;
						display: flex;

						// align-items: center;
						// justify-content: center;
						//    、、   、、、
						.danger-img {
							position: relative;
							width: 75rpx;
							height: 75rpx;
							border: 2rpx dashed #eee;
							margin-right: 10rpx;

							image {
								width: 100%;
								height: 100%;
							}


						}
					}
				}

				.hengxian {
					width: 700rpx;
					height: 2rpx;
					background-color: #eee;
					margin: 0rpx auto;
				}
			}
		}

		// 按钮
		.btns {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			z-index: 333;

			.btn1 {
				width: 50%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.consel {
				background-color: #e9e9e9;
				color: #777;
			}

			.save {
				background-color: #003690;
				color: #fff;
			}
		}
	}
</style>
